<template>
  <div>
    <h1>查看Vue的过渡动画效果</h1>
    <button @click="isShow = !isShow">控制显示隐藏</button>
    <transition>
        <div class="text" v-show='isShow'>我是动画元素</div>
    </transition>
  </div>
</template>

<script>
export default {
    name:'Trans',
    data(){
        return {
            isShow:true
        }
    }

}
</script>

<style scoped>
.text{
    width: 200px;
    height: 50px;
    background: palevioletred;
}
.v-enter,
.v-leave-to{
    opacity: 0;
    transform: translateX(300px) rotate(40deg);
}

.v-enter-active,
.v-leave-active{
    transition: all 1s linear;
}
</style>